<template>
  <div>
    <h1>欢迎━(*｀∀´*)ノ亻 光临!</h1>

    <div>
      <h2>苹果10￥/斤,今天优惠8折</h2>
      <br />
      请输入你要购买数量 <input type="number" v-model="num" />
    </div>
    <button @click="btn">结账</button>

    <p>
      结账单:总价：{{ pay }}￥元折后价：{{ payEnd }}￥元 省了:{{ resave }}￥元
    </p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      pay: 0,
      payEnd: 0,
      resave: 0,
      num: "",
    };
  },

  methods: {
    btn() {
      this.pay = this.num * 10;
      this.payEnd = this.num * 8;
      this.resave = this.num * 2;
    },
  },
};
</script>

<style>
html {
  text-align: center;
}

hr {
  line-height: none;
}
</style>